<template>
  <view class="container">
    <!-- 分类导航栏 -->
    <view class="category-bar">
      <scroll-view scroll-x="true" class="category-scroll">
        <view 
          v-for="(category, index) in categories" 
          :key="index" 
          class="category-item"
          :class="{ 'active': selectedCategory === category.value }"
          @click="filterByCategory(category.value)"
        >
          <text>{{ category.label }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 收藏列表 -->
    <view class="favorites-list">
      <view 
        v-for="(item, index) in filteredFavorites" 
        :key="item.id" 
        class="favorite-item"
        @click="goToDetail(item)"
      >
        <view class="item-header">
          <text class="item-title">{{ item.title }}</text>
          <text class="item-type">{{ item.type }}</text>
        </view>
        <text class="item-summary">{{ item.summary }}</text>
        <view class="item-meta">
          <text class="item-date">收藏于: {{ item.date }}</text>
          <view class="item-actions">
            <text class="remove-btn" @click.stop="removeFavorite(item.id)">移除</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 无结果提示 -->
    <view v-if="filteredFavorites.length === 0" class="no-result">
      <text>暂无 {{ selectedCategory === 'all' ? '' : categories.find(c => c.value === selectedCategory)?.label }} 类收藏</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: 'all', // 当前选中的分类
      categories: [
        { label: '全部', value: 'all' },
        { label: '法律条款', value: 'law' },
        { label: '常用文书', value: 'document' },
        { label: '法考题目', value: 'exam' },
        { label: '普法课堂', value: 'popularLaw' },
      ],
      // 模拟收藏数据（实际项目应从后端或本地存储获取）
      favorites: [
        {
          id: 1,
          title: '中华人民共和国宪法 第一条',
          summary: '中华人民共和国是工人阶级领导的、以工农联盟为基础的人民民主专政的社会主义国家。',
          type: '法律条款',
          date: '2025-04-01',
          detailUrl: '/pages/law-query/law-query' // 示例，实际应跳转到具体条款
        },
        {
          id: 2,
          title: '民事起诉状',
          summary: '适用于一般民事纠纷的起诉状模板',
          type: '常用文书',
          date: '2025-04-05',
          detailUrl: '/pages/document/document'
        },
        {
          id: 4,
          title: '法考模拟题 - 宪法',
          summary: '题目：根据宪法，国家的根本任务是？',
          type: '法考题目',
          date: '2025-04-12',
          detailUrl: '/pages/mock-exam/mock-exam'
        },
        {
          id: 5,
          title: '民法典合同编解读',
          summary: '详细解读合同的订立、效力、履行、变更和转让等关键条款。',
          type: '普法课堂',
          date: '2025-04-15',
          detailUrl: '/pages/popular-law-detail/popular-law-detail?id=2' // 示例
        },
        {
          id: 6,
          title: '刑法中的正当防卫',
          summary: '分析正当防卫的构成要件、防卫过当的界限及法律后果。',
          type: '普法课堂',
          date: '2025-04-18',
          detailUrl: '/pages/popular-law-detail/popular-law-detail?id=3' // 示例
        },
        {
          id: 7,
          title: '劳动仲裁申请书',
          summary: '向劳动仲裁委员会提起仲裁的申请书模板',
          type: '常用文书',
          date: '2025-04-20',
          detailUrl: '/pages/document/document'
        },
      ]
    };
  },
  computed: {
    filteredFavorites() {
      if (this.selectedCategory === 'all') {
        return this.favorites;
      }
      return this.favorites.filter(fav => fav.type === this.selectedCategory);
    }
  },
  methods: {
    filterByCategory(category) {
      this.selectedCategory = category;
    },
    goToDetail(favorite) {
      // 根据收藏类型跳转到不同详情页
      // 注意：detailUrl 只是示例，实际应根据收藏项的唯一ID跳转
      // 例如，如果是法律条款，应跳转到 law-query 页面并高亮该条款
      // 这里为了演示，使用了 detailUrl
      // 更好的方式是根据 type 和 id 构造 URL
      let url = '';
      switch (favorite.type) {
        case '法律条款':
          // url = `/pages/law-query/law-query?highlightId=${favorite.id}`;
          url = '/pages/law-query/law-query'; // 示例
          break;
        case '常用文书':
          url = '/pages/document/document';
          break;
        case '法考题目':
          url = '/pages/mock-exam/mock-exam';
          break;
        case '普法课堂':
          // url = `/pages/popular-law-detail/popular-law-detail?id=${favorite.id}`;
          url = favorite.detailUrl; // 示例
          break;
        default:
          url = '/pages/home/home'; // 默认跳转首页
      }
      uni.navigateTo({ url });
    },
    removeFavorite(id) {
      // 模拟移除收藏
      uni.showModal({
        title: '确认移除',
        content: '确定要移除此收藏吗？',
        success: (res) => {
          if (res.confirm) {
            // 实际项目中，这里应调用API或更新本地存储
            // uni.request({
            //   url: 'https://your-api.com/remove-favorite',
            //   method: 'POST',
            //   data: { id: id },
            //   success: (apiRes) => {
            //     if (apiRes.statusCode === 200) {
            //       // 从本地列表中移除
            //       this.favorites = this.favorites.filter(fav => fav.id !== id);
            //       uni.showToast({ title: '移除成功', icon: 'success' });
            //     }
            //   }
            // });

            // 模拟成功
            this.favorites = this.favorites.filter(fav => fav.id !== id);
            uni.showToast({ title: '移除成功', icon: 'success' });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.category-bar {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  margin-bottom: 20rpx;
}

.category-scroll {
  white-space: nowrap;
}

.category-item {
  display: inline-block;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.category-item.active {
  background-color: #007aff;
  color: white;
}

.favorites-list {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  padding: 20rpx 0;
}

.favorite-item {
  padding: 30rpx;
  border-bottom: 1px solid #eee;
}

.favorite-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.item-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
}

.item-type {
  font-size: 24rpx;
  color: #007aff;
  background-color: #e3f2fd;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}

.item-summary {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.item-actions {
  display: flex;
}

.remove-btn {
  color: #f44336;
  font-size: 24rpx;
  padding: 4rpx 10rpx;
  border: 1px solid #f44336;
  border-radius: 10rpx;
  margin-left: 20rpx;
}

.no-result {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>